<template>
    <div>
        {{ msg }}
        <p class="demo"></p>
    </div>
</template>

<script>
// 


// console.log(this)
// data函数中return的对象，可以通过this.$data 或者 this._data访问到
// Vue内部把data的数据做了一些响应式处理
// this.$data = this._data = data函数中返回的对象 =  Vue实例上

// 1. $data 获取的是Vue实例的data对象
//    Vue内置的，代理了data中return出来的对象，只是做了一些响应式处理 

// 2. _data 同 $data 一样，指向的也是data函数中返回的对象 
//    _data 下划线，一般表示私有的，不想给你看的，但是我们不小心发现了它，拿来看了一下

// 3. $el 获取的是当前Vue实例的dom对象
export default {
    data(){
        return {
            msg:'hello Vue',
            age:18
        }
    },
    // this.msg 
    methods:{
        demoFn(){
            console.log(1111)
        }
    },
    // 初始化前 - 初始化数据和方法之前， => 此时无法访问组件中data的数据 和 方法 
    beforeCreate(){
        // console.log('beforeCreate', this.msg)
        console.log('-------beforeCreate---------')
        console.log('数据还没有初始化完成，没有绑定到vue实例上，this上取不到')
        console.log(this.$data, '---', this.$el)
        console.log('----------------------------')
        
    },
    // 初始化后 重点， 此时，是Vue中最早可以访问data数据的生命周期中 => 可以访问数据和方法了
    // 但是 ==>  created生命周期里面，是不能访问到dom元素的！！！
    created(){
        // console.log('created', this.msg)
        // this.demoFn()
        console.log('-------created---------')
        console.log(this.$data, '---', this.$el)
        console.log('----------------------------')
    },
    // beforeMount(){
    //     console.log('beforeMount')
    // },
    // mounted(){
    //     console.log('mounted')
    // }

    // 请求ajax数据， 最早可以在created这个生命周期中进行~~~ 推荐
    // const res = await axios.get() 
    // this.arr = res.xxx

    // 用node启动koa项目，mock后端数据， 列表  请求它, 得到的数据，用data里面的变量存起来~~~待使用

    // 11 -  8个生命周期  
    // 1. 初始化  beforeCreate / created 
    // 2. 挂载 beforeMount / mounted 
    // 3. 更新  beforeUpdate / updated
    // 4. 销毁  beforeDestroy / destroyed

    // created 重点 ==> 可以访问data数据和方法，但是不能访问dom元素，还没有挂载！
}
</script>

<style>

</style>